<template>
  <transition name="van-fade">
    <van-popup v-model="showPop" position="bottom" class="player-popup">
      <play-list-cmp :list="sequenceList" icon='icon-cha' @clickBtn='deleteOne'>
        <div class="player-popup__top" slot="top">
          <div class="player-popup__title">
            <span>当前播放 {{ sequenceList.length }}</span>
          </div>
          <div class="player-popup__btn">
            <div @click="changePalyMode">
              <i class="iconfont" :class="iconMode"/>
              <span>{{ playModeTxt }}</span>
            </div>
            <div class="delete">
              <i class="iconfont icon-delete" @click="deleteAll"/>
            </div>
          </div>
        </div>
      </play-list-cmp>
    </van-popup>
  </transition>
</template>
<script>
import PlayListCmp from 'components/play-list'
import PlayerMixin from './player-mixin'
import { mapGetters, mapActions } from 'vuex'

export default {
  components: {
    PlayListCmp
  },
  mixins: [PlayerMixin],
  props: {
    value: {
      type: Boolean
    }
  },
  data() {
    return {
      showPop: this.value
    }
  },
  methods: {
    deleteAll() {
      let _this = this
      this.$dialog.confirm({
        message: '确定要清空播放列表？',
        confirmButtonText: '确定',
        confirmButtonColor: 'red',
        beforeClose(action, done) {
          if (action === 'confirm') {
            _this.showPop = false
            _this.$nextTick(() => _this.clearPlayList())
          }
          done()
        }
      })
    },
    deleteOne(song, index) {
      this.deleteOne({
        id: song.id,
        index
      })
    },
    ...mapActions('player', ['deleteOne'])
  },
  watch: {
    showPop() {
      this.$emit('input', this.showPop)
    },
    value(newV) {
      this.showPop = newV
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';
@import '~@/style/mixins.less';
.player-popup{
  height: 60%;
  z-index: 2006;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 15px;
  bottom: 20px;
  width: 90%;
  .player-popup__top{
    height: 58px;
    padding: 10px 15px;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
    .player-popup__title{
      font-size: @font-size-normal;
      padding: 10px 0;
    }
    .player-popup__btn{
      display: flex;
      padding: 5px 0;
      >div{
        flex: 1;
        height: 20px;
        line-height: 20px;
      }
      .delete{
        text-align: right;
      }
    }
  }
}
</style>